<template>
	<view>
		<custom-navigation-bar title="添加社群"></custom-navigation-bar>
		<view class="main">
			<view class="form-item">
				<view class="form-item-1">
					<view class="form-item-lable">
						群名称
					</view>
					<view class="form-item-countent">
						<input type="text" class="form-item-input" placeholder="请输入群名称" />
					</view>
					<view class="form-item-right">
						<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-1">
					<view class="form-item-lable">
						类型
					</view>
					<view class="form-item-countent">
						<picker model='selector' @change="typeChange" :range="typeArr" range-key="name">
							<input type="text" class="picker" :value="type" placeholder="请选择类型" />
						</picker>
					</view>
					<view class="form-item-right">
						<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-1">
					<view class="form-item-lable">
						价格
					</view>
					<view class="form-item-countent">
						<input type="text" class="form-item-input" placeholder="请输入价格" />
					</view>
					<view class="form-item-right">
						<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-1">
					<view class="form-item-lable">
						分佣
					</view>
					<view class="form-item-countent">
						<input type="text" class="form-item-input" placeholder="请输入分佣" />
					</view>
					<view class="form-item-right">
						<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-1">
					<view class="form-item-lable">
						人数上限
					</view>
					<view class="form-item-countent">
						<input type="text" class="form-item-input" placeholder="请输入人数上限" />
					</view>
					<view class="form-item-right">
						<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-1">
					<view class="form-item-lable">
						所属小区
					</view>
					<view class="form-item-countent">
						<picker model='selector' @change="typeChange" :range="typeArr" range-key="name">
							<input type="text" class="picker" :value="type" placeholder="请选择所属小区" />
						</picker>
					</view>
					<view class="form-item-right">
						<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="upload_01">
					<uni-file-picker limit="1" title="客服二维码"></uni-file-picker>
					<view class="ta_01"></view>
				</view>
			</view>


			<view class="form-item">
				<view class="upload_01">
					<view class="a_title">
						社群详情
					</view>
					<view v-for="(item,index) in associationDetail" :key="index">
						<view class="b_content">
							<input placeholder="请输入主标题" class="c_ttt" @focus="setAssociationDetailIndex(index)"
								@input="associationDetailTitleInput" />
							<view v-for="(item1,index1) in item.detail" :key="index1">
								<view class="b-1-2">
									<input placeholder="请输入标题" class="d_ttt"
										@focus="setAssociationDetailContentIndex(index,index1)"
										@input="associationDetailContentTitleInput" />
									<input placeholder="请输入内容" class="g_ttt"
										@focus="setAssociationDetailContentIndex(index,index1)"
										@input="associationDetailContentContentInput" />
									<image v-if="index1==0" src="/static/add.png" class="form-item-image-1"
										@click="addAssociationDetailContent(index)"></image>
									<image v-if="index1 > 0 && index1==item.detail.length-1" src="/static/sub.png"
										class="form-item-image-1" @click="subAssociationDetailContent(index,index1)">
									</image>
								</view>
							</view>
						</view>
						<view class="b-1-1">
							<image v-if="index==0" src="/static/add.png" class="form-item-image-1"
								@click="addAssociationDetail()"></image>
							<image v-if="index > 0 && index==associationDetail.length-1" src="/static/sub.png"
								class="form-item-image-1" @click="subAssociationDetail(index)"></image>
						</view>
					</view>
					<view class="ta_02" style="height: 20rpx;"></view>
				</view>
			</view>
			<view class="form-item">
				<view class="upload_01">
					<uni-file-picker limit="5" title="图文详情"></uni-file-picker>
					<view class="ta_01"></view>
				</view>
			</view>
			<view class="form-item">
				<view class="upload_01">
					<view class="a_title">
						购买须知
					</view>
					<view v-for="(item,index) in buyNotice" :key="index">
						<view class="b_content">
							<input placeholder="请输入主标题" class="c_ttt" @focus="setBuyNoticeIndex(index)"
								@input="buyNoticeTitleInput" />
							<view v-for="(item1,index1) in item.detail" :key="index1">
								<view class="b-1-2">
									<input placeholder="请输入内容" class="z_ttt"
										@focus="setBuyNoticeDetailIndex(index,index1)" @input="buyNoticeContentInput" />
									<image v-if="index1==0" src="/static/add.png" class="form-item-image-1"
										@click="addBuyNoticeContent(index)"></image>
									<image v-if="index1 > 0 && index1==item.detail.length-1" src="/static/sub.png"
										class="form-item-image-1" @click="subBuyNoticeContent(index,index1)"></image>
								</view>
							</view>
						</view>
						<view class="b-1-1">
							<image v-if="index==0" src="/static/add.png" class="form-item-image-1"
								@click="addBuyNotice()"></image>
							<image v-if="index>0 && index==buyNotice.length-1" src="/static/sub.png"
								class="form-item-image-1" @click="subBuyNotice(index)"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="form-item">
			<view class="btn-b1">
				<view class="btn" @click="submit">提交</view>
			</view>
		</view>
		<view class="btn-0010"></view>
	</view>
</template>

<script setup>
	import CustomNavigationBar from '@/components/CustomNavigationBar.vue';
	import http from '../../../utils/http';

	const association = ref({
		associationId: "",
		associationName: "",
		type: "",
		money: 0.00,
		currentNum: 0,
		maxNum: 0,
		associationRegion: "",
		associationCommunity: "",
		associationContactImage: "",
		associationDetail: [],
		associationDetailImage: [],
		buyNotice: [],
		applicationStatus: "pending",
		applicationTime: ""
	})
	const typeArr = ref([{
			id: 1,
			name: '辣妈遛娃'
		},
		{
			id: 2,
			name: '单身社群'
		},
		{
			id: 3,
			name: '中年少女'
		},
		{
			id: 4,
			name: '老青年生活'
		}
	]);
	//类型
	const type = ref('');
	const typeIndex = ref(0);

	function typeChange(e) {
		const index = e.detail.value;
		type.value = typeArr.value[index].name;
		typeIndex.value = typeArr.value[index].id;
	}
	//费用
	const feiyong = ref([{}]);

	function addFeiYong() {
		feiyong.value.push({
			name: '',
			money: '',
			bili: ''
		});
	}

	function subFeiYong(index) {
		feiyong.value.splice(index, 1);
		console.log(feiyong.value)
	}
	//报名时间 
	const biaomingData = ref('');

	function biaomingDataChange(e) {
		biaomingData.value = e.detail.value;
	}
	//报名时间
	const data = ref('');

	function dataChange(e) {
		data.value = e.detail.value;
	}
	//----------------------------------社群详情开始--------------------------
	//详情输入框的索引
	const associationDetailIndex = ref(0);
	//获取详情输入框的索引
	function setAssociationDetailIndex(index) {
		associationDetailIndex.value = index;
	}
	const associationDetail = ref([{
		title: '',
		detail: [{
			title: '',
			content: ''
		}]
	}]);
	//添加一级标题内容
	function addAssociationDetail() {
		associationDetail.value.push({
			title: '',
			detail: [{
				title: '',
				content: ''
			}]
		});
		console.log(associationDetail.value);
	}
	//删除一级标题内容
	function subAssociationDetail(index) {
		associationDetail.value.splice(index, 1);
	}
	//一级标题输入
	function associationDetailTitleInput(event) {
		associationDetail.value[associationDetailIndex.value].title = event.target.value
	}
	//添加二级标题
	function addAssociationDetailContent(index) {
		associationDetail.value[index].detail.push({
			title: '',
			content: ''
		});
	}
	//删除二级标题
	function subAssociationDetailContent(index, index1) {
		associationDetail.value[index].detail.splice(index1, 1);
	}
	//二级标题索引
	const associationDetailContentIndex = ref([0, 0]);

	function setAssociationDetailContentIndex(index, index1) {
		associationDetailContentIndex.value = [index, index1];
	}
	//二级标题输入
	function associationDetailContentTitleInput(event) {
		associationDetail.value[associationDetailContentIndex.value[0]].detail[associationDetailContentIndex.value[1]]
			.title = event.target.value;
	}
	//二级标题内容输入
	function associationDetailContentContentInput(event) {
		associationDetail.value[associationDetailContentIndex.value[0]].detail[associationDetailContentIndex.value[1]]
			.content = event.target.value;
	}
	//----------------------------------社群详情结束--------------------------

	//----------------------------------购买须知开始--------------------------
	//购买须知索引
	const buyNoticeIndex = ref(0);

	function setBuyNoticeIndex(index) {
		buyNoticeIndex.value = index;
		console.log(buyNoticeIndex.value)
	}
	const buyNotice = ref([{
		title: '',
		detail: [{
			content: ''
		}]
	}]);
	//添加一级标题
	function addBuyNotice() {
		buyNotice.value.push({
			title: '',
			detail: [{
				content: ''
			}]
		});
		console.log(buyNotice.value)
	}
	//删除一级标题
	function subBuyNotice(index) {
		buyNotice.value.splice(index, 1);
	}
	//一级标题内容输入
	function buyNoticeTitleInput(event) {
		console.log(event.target.value + '-----' + buyNoticeIndex.value)
		buyNotice.value[buyNoticeIndex.value].title = event.target.value;
	}
	//二级标题索引
	const buyNoticeDetailIndex = ref([0, 0]);
	//设置二级标题索引
	function setBuyNoticeDetailIndex(index, index1) {
		buyNoticeDetailIndex.value = [index, index1];
	}
	//添加二级内容
	function addBuyNoticeContent(index) {
		buyNotice.value[index].detail.push({
			content: ''
		});
	}
	//删除二级内容
	function subBuyNoticeContent(index, index1) {
		buyNotice.value[index].detail.splice(index1, 1);
	}
	//二级内容输入
	function buyNoticeContentInput(event) {
		buyNotice.value[buyNoticeDetailIndex.value[0]].detail[buyNoticeDetailIndex.value[1]].content = event.target.value;
	}
	//---------------------------------购买须知结束---------------------------
	function submit() {
		http.request({
			url: "/api/cityPartner/add_association",
			method: "POST",
			data: {
				"association": association.value
			}
		}).then((responseData) => {
			console.log("respoonse association", responseData.data)
		})
	}
</script>

<style>
	@import "../../application/form.scss";
</style>